<template>
	<view>
		<u-toast ref="uToast" /><u-no-network></u-no-network>
		<u-navbar title="分享" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>
		<view class="coreshop-margin-bottom-25 coreshop-padding-top-25 coreshop-text-center">
			<img class="share-img" :src="poster" mode="widthFix" />
		</view>
		<view class="share-bot flex flex-direction">
			<view class="coreshop-margin-bottom-20">
				<u-button shape="square" type="primary" @click="savePoster()">
					<u-icon name="download" :margin-right="20" label="保存到本地" color="#fff" labelColor="#fff"></u-icon>
				</u-button>
			</view>
			<u-button shape="square" @click="goBack()">
				<u-icon name="arrow-leftward" :margin-right="20" label="返回" labelColor="#333"></u-icon>
			</u-button>
		</view>
		<!-- 登录提示 -->
		<coreshop-login-modal></coreshop-login-modal>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				poster: ''
			};
		},
		onLoad(options) {
			this.poster = decodeURIComponent(options.poster);
		},
		computed: {},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 保存海报到本地
			savePoster() {
				let _this = this;
				// #ifdef MP || MP-ALIPAY || APP-PLUS || APP-PLUS-NVUE
				_this.downloadImageOfMp(_this.poster)
				// #endif
			},
			//下载图片地址和图片名
			downloadIamge(imgsrc, name) {
				var image = new Image();
				// 解决跨域 Canvas 污染问题
				image.setAttribute('crossorigin', 'anonymous');
				image.onload = () => {
					var canvas = document.createElement('canvas');
					canvas.width = image.width;
					canvas.height = image.height;
					var context = canvas.getContext('2d');
					context.drawImage(image, 0, 0, image.width, image.height);
					var url = canvas.toDataURL('image/png'); //得到图片的base64编码数据
					var a = document.createElement('a'); // 生成一个a元素
					var event = new MouseEvent('click'); // 创建一个单击事件
					a.download = name || 'photo'; // 设置图片名称
					a.href = url; // 将生成的URL设置为a.href属性
					a.dispatchEvent(event); // 触发a的单击事件
				};
				image.src = imgsrc;
			},
			downloadImageOfMp(image) {
				let _this = this

				// #ifdef APP-PLUS || APP-PLUS-NVUE
				uni.downloadFile({
					url: image,
					success(res) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success() {
								_this.$refs.uToast.show({
									message: '操作成功',
									type: 'success'
								})
							},
							fail() {
								_this.$u.toast('图片保存失败')
							}
						});
					},
					fail() {
						_this.$u.toast('下载失败')
					}
				})
				// #endif

				// #ifdef MP
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success() {
						// 先下载到本地
						uni.downloadFile({
							url: image,
							success(res) {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success() {
										_this.$refs.uToast.show({
											message: '保存成功',
											type: 'success'
										})
									},
									fail() {
										_this.$u.toast('图片保存失败')
									}
								});
							},
							fail() {
								_this.$u.toast('下载失败')
							}
						})
					},
					fail() {
						//console.log('授权失败')
					}
				})
				// #endif
			}
		}
	};
</script>
<style scoped lang="scss">
	@import "sharePoster.scss";
</style>